<template>
    <el-row :gutter="20">
        <el-col :span="16">
            <div class="top_box">
                <div class="title">
                    【{{ stat_Info?.name }}】
                    <div class="title_tips">{{ infoName[stat_Info?.type - 1] }}</div>
                    <div class="process_title" :class="`task_schel_${stat_Info?.task_status}`">
                        {{ taskStatus(stat_Info?.task_status) }}
                    </div>
                </div>
                <div class="top_desc">{{ stat_Info?.desc }}</div>
                <el-divider class="line" border-style="double" />
                <el-descriptions column="2">
                    <el-descriptions-item label="创建人：" width="50%">{{
                        stat_Info?.created_uid_name
                    }}</el-descriptions-item>
                    <el-descriptions-item label="有效期：" width="50%">{{
                        stat_Info?.effect_time?.join('  &nbsp; &nbsp; &nbsp;')
                    }}</el-descriptions-item>
                    <el-descriptions-item label="执行员工：" width="50%" label-class-name="last_label"
                        >{{ stat_Info?.work_user_count }}人</el-descriptions-item
                    >
                    <el-descriptions-item label="执行对象：" width="50%" label-class-name="last_label">
                        {{ getCustNum(stat_Info) }}
                    </el-descriptions-item>
                </el-descriptions>
            </div>
        </el-col>
        <el-col :span="8">
            <div class="top_box">
                <div class="tit_r">
                    <div class="tit_r_process">
                        <el-progress
                            type="circle"
                            :format="perFormat"
                            :percentage="parseFloat(task_propcess?.whole_proportion)"
                            width="100"
                            stroke-width="12"
                            color="#FF6B00" />
                        <div class="task_text">
                            <span
                                >任务整体进度
                                <el-tooltip class="box-item">
                                    <template #content>{{ `累计已完成任务数/${task_name}总数` }}</template>
                                    <el-icon><Warning /></el-icon>
                                </el-tooltip>
                            </span>
                        </div>
                    </div>
                    <div v-if="cycle != 0 || stat_Info?.type == 3" class="tit_r_process">
                        <el-progress
                            type="circle"
                            :format="perFormat"
                            :percentage="parseFloat(cycleProcess.per)"
                            width="100"
                            stroke-width="12"
                            color="#59D2A0" />
                        <div class="task_text">
                            <span
                                >{{ cycleProcess.title }}
                                <el-tooltip class="box-item" effect="light">
                                    <template #content>{{ cycleProcess.content }}</template>
                                    <el-icon><Warning /></el-icon>
                                </el-tooltip>
                            </span>
                            <span class="task_time">{{ task_propcess?.time }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </el-col>
    </el-row>
    <el-card class="task_schedule" shadow="never">
        <div class="title">任务整体进度</div>
        <el-divider class="line" border-style="double" />
        <el-row :gutter="10" class="process">
            <el-col v-for="item in getProcessData" :key="item.name" :span="4">
                <div class="schedule_title">
                    {{ item.name }}
                    <el-tooltip v-if="item.icon" class="box-item">
                        <template #content>{{ item.content }}</template>
                        <el-icon class="schedule_icon"><Warning /></el-icon>
                    </el-tooltip>
                </div>
                <div class="schedule_number" :class="{ black_color: item.icon }">
                    {{ numFormat(task_propcess[item.number]) }}
                </div>
            </el-col>
        </el-row>
    </el-card>
    <Search ref="searchRef" :default-time="defaultTime" @submit="filter_list" />
    <!-- 客户任务趋势图 -->
    <el-card class="task_schedule" shadow="never">
        <div class="title">{{ task_name }}任务趋势图</div>
        <el-divider class="line" border-style="double" />
        <div v-if="trendData.time.length > 0" ref="custTrendRef" class="bread_box"></div>
        <div v-else class="bread_box_none">
            <div class="none_data">
                <img class="no_img" src="@/assets/noData.png" alt="" />
                <div class="emty_title">暂无数据</div>
            </div>
        </div>
    </el-card>
    <el-row :gutter="20">
        <!-- 客户转化漏斗 -->
        <el-col :span="12">
            <el-card class="task_schedule" shadow="never">
                <div class="title">{{ task_name }}转化漏斗</div>
                <el-divider class="line" border-style="double" />
                <div v-if="funnelData.length > 0" ref="custConversionRef" class="bread_box"></div>
                <div v-else class="bread_box_none">
                    <div class="none_data">
                        <img class="no_img" src="@/assets/noData.png" alt="" />
                        <div class="emty_title">暂无数据</div>
                    </div>
                </div>
            </el-card>
        </el-col>
        <!-- 客户阶段占比 -->
        <el-col :span="12">
            <el-card class="task_schedule" shadow="never">
                <div class="title">{{ task_name }}阶段占比</div>
                <el-divider class="line" border-style="double" />
                <div v-if="perData.length > 0" ref="custStateRef" class="bread_box"></div>
                <div v-else class="bread_box_none">
                    <div class="none_data">
                        <img class="no_img" src="@/assets/noData.png" alt="" />
                        <div class="emty_title">暂无数据</div>
                    </div>
                </div>
            </el-card>
        </el-col>
    </el-row>
    <!-- 员工任务完成情况 -->
    <el-card class="task_schedule" shadow="never">
        <div class="title">员工任务完成情况</div>
        <el-divider class="line" border-style="double" />
        <div v-if="completionData.length > 0" ref="custCompleteRef" class="bread_box" :style="{ height: height }"></div>
        <div v-else class="bread_box_none">
            <div class="none_data">
                <img class="no_img" src="@/assets/noData.png" alt="" />
                <div class="emty_title">暂无数据</div>
            </div>
        </div>
    </el-card>
</template>
<script lang="ts" setup>
import { getSetionId } from '@/utils/utils';
interface filterData {
    task_id: string | number;
    currentId?: string | number;
    time: Array<string>;
    work_user: Array<number | string>;
}
import { ref, reactive, onMounted, inject, computed, nextTick } from 'vue';
import Search from './components/Search.vue';
import router from '@/router';
import { statInfo, statProcess, statList } from '@/api/employe/employeetasks/taskmanage';
import { numFormat, IsNotEmpty } from '@/utils/utils';
const infoName = reactive(['电话销售', '客户拜访', '企微招募']);
const task_type = ref(1);
const cycle = ref(1);
const task_propcess = ref({});
const stat_Info = ref({});
const task_id = ref('');
const searchRef = ref(null);
const custTrendRef = ref(null);
const custConversionRef = ref(null);
const custStateRef = ref(null);
const custCompleteRef = ref(null);
const height = ref('400px');
const echarts: any = inject('ec');
const styles = [
    {
        color: 'linear-gradient(90deg, rgba(93, 139, 234, 0.4) 0%, #5D8BEA 100%)',
        opacity: 0.9
    },
    {
        color: 'linear-gradient(90deg, rgba(70, 213, 181, 0.4) 0%, #46D5B5 100%)',
        opacity: 0.9
    },
    {
        color: 'linear-gradient(90deg, rgba(255, 217, 25, 0.4) 0%, #FFD919 100%)',
        opacity: 0.9
    },
    {
        color: 'linear-gradient(90deg, rgba(255, 86, 41, 0.4) 0%, #FF5629 100%)',
        opacity: 0.9
    }
];
const trendData = ref({
    time: [],
    name: [],
    data: []
});
const funnelData = ref([]);
const perData = ref([]);
const completionData = ref([]);
const top10 = ref([]);
const maxFunnel = ref(0);
const task_name = ref('客户');
const defaultTime = ref([]);
const task_cycle = computed(() => {
    return ['今日', '本期', '本期', '本期'][cycle.value];
});
//百分号
const perFormat = (val: string) => {
    return val + '%';
};
const custData = task_cycle => {
    return [
        { name: '客户总数', number: 'total_num' },
        { name: '计划拜访客户数', number: 'plan_num', icon: true, content: '员工录入计划拜访数量' },
        { name: '已签到客户数', number: 'signin_num' },
        { name: '完成拜访客户数', number: 'complete_num' },
        { name: '任务整体完成进度', number: 'whole_proportion', icon: true, content: '完成拜访客户数/客户总数' },
        { name: `${task_cycle}计划拜访数`, number: 'cycle_num' },
        { name: `${task_cycle}已签到数`, number: 'cycle_signin_num' },
        { name: `${task_cycle}已完成拜访数`, number: 'cycle_visit_num' },
        {
            name: `${task_cycle}完成拜访率`,
            number: 'visit_proportion',
            icon: true,
            content: `${task_cycle}完成拜访数/${task_cycle}计划拜访数`
        },
        {
            name: `${task_cycle}已完成拜访员工`,
            number: 'work_user_proportion',
            icon: true,
            content: `${task_cycle}已完成拜访员工数/${task_cycle}执行员工数`
        }
    ];
};
// 一次
const callData = () => {
    return [
        { name: `${task_name.value}总数`, number: 'total_num' },
        {
            name: `已联系${task_name.value}数`,
            number: 'contact_num',
            icon: true,
            content: `${task_name.value}总数-未联系${task_name.value}数`
        },
        {
            name: '任务整体完成进度',
            number: 'whole_proportion',
            icon: true,
            content: `已联系${task_name.value}数/${task_name.value}总数`
        },
        { name: '执行员工数', number: 'work_user_count' },
        { name: '已完成员工数', number: 'work_user_complete_count' },
        { name: '员工完成百分率', number: 'work_user_proportion', icon: true, content: '已完成员工数/执行员工数' }
    ];
};
// 周期
const callCycleData = () => {
    return [
        { name: `${task_name.value}总数`, number: 'total_num' },
        { name: `已分配${task_name.value}数`, number: 'dis_num' },
        {
            name: `${task_name.value}分配进度`,
            number: 'dis_proportion',
            icon: true,
            content: `已分配${task_name.value}数/${task_name.value}总数`
        },
        { name: '已完成任务数', number: 'complete_num' },
        {
            name: '任务整体完成进度',
            number: 'whole_proportion',
            icon: true,
            content: `已完成任务数/${task_name.value}总数`
        },
        { name: `${task_cycle.value}分配${task_name.value}数`, number: 'cycle_plan' },
        { name: `${task_cycle.value}已完成任务数`, number: 'cycle_complete' },
        {
            name: `${task_cycle.value}任务完成率`,
            number: 'cycle_proportion',
            icon: true,
            content: `${task_cycle.value}已完成任务数/${task_cycle.value}分配${task_name.value}数`
        },
        { name: '累计员工任务总数', number: 'sum_task' },
        { name: '累计已完成任务数', number: 'sum_complete_task' },
        { name: '累计员工完成率', number: 'sum_proportion', icon: true, content: '累计已完成任务数/累计员工任务总数' }
    ];
};
// 加微
const qwData = (task_name, task_cycle) => {
    return [
        { name: `${task_name}总数`, number: 'total_num' },
        { name: '已加微信数', number: 'addwx_num' },
        { name: '完成任务数', number: 'complete_num' },
        {
            name: '任务整体完成进度',
            number: 'whole_proportion',
            icon: true,
            content: `完成加微${task_name}数/${task_name}总数`
        },
        // { name: `${task_cycle}分配客户数`, number: 'cycle_num', icon: true, content: `${task_cycle}分配客户数` },
        { name: `${task_cycle}加微${task_name}数`, number: 'cycle_addwx_num' },
        { name: `${task_cycle}任务完成数`, number: 'today_addwx_complete_num' },
        {
            name: `${task_cycle}任务完成率`,
            number: 'cycle_proportion',
            icon: true,
            content: `${task_cycle}任务完成数/${task_cycle}加微${task_name}数`
        },
        {
            name: `${task_cycle}员工任务完成率`,
            number: 'work_user_proportion',
            icon: true,
            content: `${task_cycle}已完成任务员工/${task_cycle}执行员工数`
        }
    ];
};
const taskStatus = (num: number) => {
    switch (num) {
        case 1:
            return '未开始';
        case 2:
            return '进行中';
        case 3:
            return '任务已完成';
        case 6:
            return '逾期完成';
        case 7:
            return '已逾期';
    }
};
const getCustNum = (data: object) => {
    if (data.object_class == 1) {
        return `${task_name.value}：${numFormat(data?.total_num)}人   ${['平均分配', '随机分配'][data?.dis_rule - 1]}`;
    } else {
        let str = `${task_name.value}`;
        if (data?.entry_day_num) {
            str = `${task_cycle.value}录入${data?.entry_day_num}人  `;
        }
        if (data?.entry_user_num) {
            str += `预计录入${data?.entry_user_num}人 `;
        }
        return str;
    }
};
// 获取数据
// eslint-disable-next-line vue/return-in-computed-property
const getProcessData = computed(() => {
    switch (task_type.value) {
        case 1:
            return cycle.value == 0 ? callData : callCycleData;
        case 2:
            return custData(task_cycle.value);
        case 3:
            // eslint-disable-next-line no-case-declarations
            const task_name2 = cycle.value == 0 ? '今日' : '本期';
            // eslint-disable-next-line no-case-declarations
            const qw_data = qwData(task_name.value, task_name2);
            if (task_name2 == '本期') {
                qw_data.splice(
                    4,
                    4,
                    { name: `本期分配${task_name.value}数`, number: 'cycle_dis_num' },
                    { name: `本期加微${task_name.value}数`, number: 'cycle_addwx_num' },
                    { name: '本期任务完成数', number: 'cycle_addwx_complete_num' },
                    {
                        name: '本期任务完成率',
                        number: 'cycle_proportion',
                        icon: true,
                        content: `本期已完成任务数/本期分配${task_name.value}数`
                    },
                    {
                        name: '本期员工任务完成率',
                        number: 'cycle_work_user_proportion',
                        icon: true,
                        content: `本期已完成任务的员工数/执行员工数`
                    }
                );
            }
            return () => qw_data;
    }
});
// 周期任务
// eslint-disable-next-line vue/return-in-computed-property
const cycleProcess = computed(() => {
    const sclye = task_cycle.value;
    const per =
        stat_Info.value.type == 3 && cycle.value == 0
            ? task_propcess.value?.today_proportion
            : task_propcess.value?.cycle_proportion;
    switch (task_type.value) {
        case 1:
            return {
                per,
                content: `${sclye}完成数/${sclye}员工任务总数`,
                title: `${sclye}任务进度`
            };
        case 2:
            return {
                per,
                content: `${sclye}已完成拜访客户数/${sclye}拜访计划总数`,
                title: `${sclye}拜访进度`
            };
        case 3:
            return cycle.value !== 0
                ? {
                      per,
                      content: `本期已完成任务数/本期分配${task_name.value}数`,
                      title: `本期任务完成率`
                  }
                : {
                      per,
                      content: `今日任务完成数/今日企微招募${task_name.value}数`,
                      title: `今日任务完成率`
                  };
    }
});
// 客户任务趋势图
const getEchartTrend = () => {
    const myChartLine = echarts?.init(custTrendRef.value);
    trendData.value.data.map((item: any) => {
        (item.smooth = true), (item.symbol = 'circle');
    });
    const option = {
        color: ['#4B7FE8', '#A65FEF', '#32D1AD', '#FF9D23', '#FFD500', '#FF4412'],
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            bottom: 0,
            data: trendData.value.name
        },
        grid: {
            left: '2%',
            right: '3%',
            bottom: '10%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: trendData.value.time
        },
        yAxis: {
            type: 'value'
        },
        series: trendData.value.data
    };
    myChartLine.setOption(option);
    nextTick(() => {
        myChartLine.resize();
    });
    window.onresize = function () {
        myChartLine.resize();
    };
};
// 客户阶段占比
const getEcharStage = () => {
    if (perData.value.length == 0) return;
    const myChart_one = echarts?.init(custStateRef.value);
    myChart_one.setOption({
        tooltip: {
            trigger: 'item'
        },
        series: [
            {
                name: '浏览时间段',
                type: 'pie',
                data: perData.value.map((el: any, index) => {
                    el.label = {
                        color: ['#FF6A06', '#4B7FE8', '#FF9D23', '#FFD500', '#FFBE49'][index]
                    };
                    return el;
                }),
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            formatter: '{b} : {d}%'
                        },
                        labelLine: { show: true }
                    }
                },
                color: ['#FF6A06', '#4B7FE8', '#FF9D23', '#FFD500', '#FFBE49'],
                radius: '50%'
            }
        ]
    });
    nextTick(() => {
        myChart_one.resize();
    });
    window.onresize = function () {
        myChart_one.resize();
    };
};
// 客户转化漏斗
const getEchartFunnel = () => {
    if (funnelData.value.length) {
        const myChart_one = echarts?.init(custConversionRef.value);
        myChart_one.setOption({
            color: ['#709EFA', '#A65FEF', '#32D1AD', '#FF9D23', '#FFD500', '#FF8693', '#6DD4D6'],
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    return `${params.data.name}: ${params.data.value}%`;
                }
            },
            series: [
                {
                    name: '客户转化',
                    type: 'funnel',
                    left: '10%',
                    top: 60,
                    bottom: 60,
                    width: '80%',
                    min: 0,
                    max: maxFunnel.value,
                    minSize: '0%',
                    maxSize: '70%',
                    sort: 'none',
                    gap: 2,
                    label: {
                        show: true,
                        position: 'right'
                    },
                    labelLine: {
                        length: 18,
                        lineStyle: {
                            width: 1,
                            type: 'solid'
                        }
                    },
                    itemStyle: {
                        borderColor: '#fff',
                        borderWidth: 1
                    },
                    emphasis: {
                        label: {
                            fontSize: 20
                        }
                    },
                    data: funnelData.value
                }
            ]
        });
        nextTick(() => {
            myChart_one.resize();
        });
        window.onresize = function () {
            myChart_one.resize();
        };
    }
};
//员工任务完成情况
const getEchartTask = () => {
    if (completionData.value.length == 0) return;
    const myChart_one = echarts?.init(custCompleteRef.value);
    myChart_one.setOption({
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            bottom: 0
        },
        grid: {
            top: '2%',
            left: '3%',
            right: '4%',
            bottom: '10%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
        },
        yAxis: {
            type: 'category',
            data: getSetionId('name', completionData.value),
            axisLine: {
                lineStyle: {
                    color: '#E4E4E4'
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#666666'
                }
            }
        },
        series: top10.value
    });
    nextTick(() => {
        myChart_one.resize();
    });
    window.onresize = function () {
        myChart_one.resize();
    };
};
// 获取击锤信息
const getStatInfo = async () => {
    const res: any = await statInfo({ task_id: task_id.value });
    stat_Info.value = res;
    // searchRef.value.form.time = res.effect_time
    defaultTime.value = res.effect_time;
    // cycle.value = res.cycle_unit;
    task_name.value = ['线索', '客户'][res.object_type - 1];
    task_type.value = res.type;
};
// 筛选数据/进度
const getStatList = async (data?: filterData) => {
    const params = {
        task_id: task_id.value,
        ...searchRef?.value.form,
        ...data
    };
    delete params?.currentId;
    const res: any = await Promise.allSettled([statList(params), statProcess(params)]);
    cycle.value = res[1].value.cycle_unit;
    task_propcess.value = res[1].value;
    //  res[0] 图表数据 res[1]任务整体进度
    trendData.value = res[0].value.trend; // 客户趋势图
    res[0].value.funnel.forEach((item: any) => (item.value = item.per));
    funnelData.value = res[0].value.funnel; // 客户转化漏斗图
    maxFunnel.value =
        Math.max(...getSetionId('value', funnelData.value)) == 0
            ? 1
            : Math.max(...getSetionId('value', funnelData.value));
    perData.value = res[0].value.per; //客户阶段占比
    completionData.value = res[0].value.completion; //员工任务完成情况
    top10.value = [];
    const arr: number[] = [];
    completionData.value.forEach((t: any) => {
        arr.push(t.stage.length);
        if (t.stage.length > 0) {
            t.stage.forEach((v: any) => {
                const Names = getSetionId('name', top10.value);
                if (Names.includes(v.stage_name)) {
                    const index = Names.indexOf(v.stage_name);
                    top10.value[index].data.push(v.num);
                } else {
                    top10.value.push({
                        name: v.stage_name,
                        type: 'bar',
                        data: [v.num]
                    });
                }
            });
        }
    });
    height.value = 400 + (Math.max.apply(null, arr) - 10) * 25 + 'px';
};
const filter_list = async (val: filterData) => {
    await getStatList(val);
    nextTick(() => {
        getEchartTrend();
        getEcharStage();
        getEchartFunnel();
        getEchartTask();
    });
};
onMounted(async () => {
    task_id.value = router.currentRoute.value.query?.id || 1;
    if (task_id.value) {
        await getStatInfo();
        // filter_list()
    }
});
</script>
<style lang="scss" scoped>
@mixin ellipse($num: 3) {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $num;
    -webkit-box-orient: vertical;
}

@mixin after($color) {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: $color;
    transform: translateY(-50%);
}

.top_box {
    height: 100%;
    box-sizing: border-box;
    background-color: #fff;
    padding: 24px 24px 12px !important;
    box-shadow: 0 4px 4px 0 rgb(240 240 240 / 50%);
    border: 1px solid #eaeaea;

    .tit_r {
        display: flex;
        justify-content: space-around;
        align-items: flex-start;

        .tit_r_process {
            margin-top: 10px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-direction: column;

            .task_text {
                margin-top: 12px;
                display: flex;
                align-items: center;
                flex-direction: column;

                span {
                    text-align: center;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, 'PingFang SC';
                    font-weight: 400;
                    color: #333;
                    line-height: 22px;
                }
            }

            .task_time {
                display: block;
            }
        }
    }
}

.title {
    font-size: 18px;
    font-family: STHeitiSC-Medium, STHeitiSC;
    font-weight: 500;
    color: #33302d;

    .title_tips {
        display: inline-block;
        width: 64px;
        height: 24px;
        background: #ebfff3;
        border-radius: 2px;
        border: 1px solid #bcf1d1;
        text-align: center;
        line-height: 24px;
        font-size: 12px;
        font-family: PingFangSC-Regular, 'PingFang SC';
        font-weight: 400;
        color: #59d2a0;
    }

    .process_title {
        margin-top: 6px;
        font-size: 14px;
        font-family: STHeitiSC-Light, STHeitiSC;
        font-weight: 300;
        color: #4099ec;
        float: right;
        padding-left: 14px;
        position: relative;

        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #4099ec;
            transform: translateY(-50%);
        }
    }

    .task_schel_1 {
        color: #5a5a5a;

        &::after {
            @include after(#5a5a5a);
        }
    }

    .task_schel_2 {
        color: #4b7fe8;

        &::after {
            @include after(#4b7fe8);
        }
    }

    .task_schel_3 {
        color: #32d1ad;

        &::after {
            @include after(#32d1ad);
        }
    }

    .task_schel_6 {
        color: #ff9d23;

        &::after {
            @include after(#ff9d23);
        }
    }

    .task_schel_7 {
        color: #ff4412;

        &::after {
            @include after(#ff4412);
        }
    }
}

.top_desc {
    margin-top: 13px;
    font-size: 14px;
    font-family: PingFangSC-Regular, 'PingFang SC';
    font-weight: 400;
    color: #585858;
    line-height: 20px;
    max-height: 60px;
    min-height: 20px;
    overflow: hidden;

    @include ellipse(3);
}

.task_schedule {
    margin-top: 16px;

    .process {
        .el-col {
            &:last-of-type {
                text-align: left;
            }
        }
    }

    .title {
        font-size: 16px;
        font-family: PingFangSC-Medium, 'PingFang SC';
        font-weight: 500;
        color: #585858;
        line-height: 22px;
    }

    .schedule_title {
        font-size: 14px;
        font-family: PingFangSC-Regular, 'PingFang SC';
        font-weight: 400;
        color: #666;
        line-height: 20px;
        display: flex;
        align-items: center;

        .schedule_icon {
            margin-left: 5px;
            color: #000;
        }
    }

    .schedule_number {
        padding-top: 8px;
        font-size: 30px;
        font-family: HelveticaNeue-Medium, HelveticaNeue;
        font-weight: 500;
        color: #33302d;
        line-height: 36px;
        margin-bottom: 20px;
    }

    .black_color {
        font-family: Helvetica;
        color: #33302d;
    }
}

.line {
    margin: 20px 0;
}

.bread_box {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 400px;
}

.bread_box_none {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
}

.h600 {
    height: 600px;
}

.none_data {
    .emty_title {
        margin-top: 10px;
        transform: translateX(15%);
    }
}
</style>
